<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css" />
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/mui.min.js"></script>
		<script src="js/echarts.min.js"></script>
		<link rel="stylesheet" href="bs/css/bootstrap.min.css" />
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
		</style>
	</head>

	<body>
		<div id="main">
			<div> {{message}}</div>
			<input type="text" v-model="message">
			<button onclick="show()">刷新</button>
			<button onclick="addcount()">添加</button>
			<button onclick="onSell()">卖出</button>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">购买</a>
					<div class="mui-collapse-content">
						<nav class="mui-bar mui-bar-tab">
							<a class="mui-tab-item mui-active" href="#tabbar">
								<span class="mui-icon mui-icon-home"></span>
								<span class="mui-tab-label">首页</span>
							</a>
							<a class="mui-tab-item" href="#tabbar-with-chat">
								<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
								<span class="mui-tab-label">消息</span>
							</a>
							<a class="mui-tab-item" href="#tabbar-with-contact">
								<span class="mui-icon mui-icon-contact"></span>
								<span class="mui-tab-label">通讯录</span>
							</a>
							<a class="mui-tab-item" href="#tabbar-with-map">
								<span class="mui-icon mui-icon-gear"></span>
								<span class="mui-tab-label">设置</span>
							</a>
						</nav>
						<button onclick="onBuy()">看多买入</button>
						<button onclick="onBuyEmpty()">看空买入</button>
					</div>
				</li>
			</ul>
		</div>
		<div id="chart" style="width: 100%;height:400px;"></div>
	</body>
	<script type="text/javascript" src="js/echarts.min.js"></script>
	<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
	<script type="application/javascript" src="js/traderapi.js"></script>

	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});

		var d = new Vue({
			el: "#main",
			data: {
				message: 'Hello Vue!'
			}
		});

		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('chart'));

		// 指定图表的配置项和数据
		var option = {
			title: {
				text: 'ECharts 入门示例'
			},
			tooltip: {},
			legend: {
				data: ['销量']
			},
			xAxis: {
				data: []
			},
			yAxis: {},
			series: [{
				name: '销量',
				type: 'line',
				data: []
			}]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);

		function onBuy() {
			login(function(data) {
				buy(data, 0);
			});
		}

		function onBuyEmpty() {
			login(function(data) {
				buy(data, 1);
			});
		}

		function onSell() {
			login(function(data) {
				var orders = getOrders(data);
				if(orders == null || orders.length <= 0) {
					plus.nativeUI.toast("当前没有订单!");
					return;
				}
				var result = sell(data, orders[0]);
				alert(result);
			});
		}

		function show() {

			var arrs = [];
			var dates = []
			$.get("https://stock.oksdb.com/futuresquota/getFstData?futuresType=CL", function(data) {
				var d = $.parseJSON(data)
				var datas = d["data"];
				for(var i = 0; i < datas.length; i++) {
					arrs.push(datas[i]["lastPrice"]);
					dates.push(datas[i]["lastTime"]);
				}
				var maxValue = Math.max.apply(Math, arrs);
				var minValue = Math.min.apply(Math, arrs);
				myChart.setOption({
					xAxis: {
						data: dates
					},
					yAxis: {
						type: 'value',
						min: minValue,
						max: maxValue
					},
					xAxis: {
						//type:'time'
					},
					series: [{
						name: '成交',
						data: arrs
					}]
				});
			})

		}

		setInterval(function() {
			show();
		}, 1000);

		show()

		function find() {
			plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, function(addressbook) {
				addressbook.find(["吴刚", "phoneNumbers"], function(contacts) {
					alert(JSON.stringify(contacts[12]));

				}, function() {
					alert("error");
				}, {
					multiple: true
				});
			}, function(e) {
				alert("Get address book failed: " + e.message);
			});
		}
	</script>

</html>